<template>
  <div>
    <el-dialog v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" title="修改靶场" :visible="updateShow">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-col :span="12">
            <el-form-item label="靶场名称" prop="testName">
              <el-input v-model="formData.testName"
                        placeholder="请输入靶场名称"
                        clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item label="靶场简介" prop="simpleNote">
              <el-input v-model="formData.simpleNote" placeholder="请输入靶场简介" clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="21">
            <el-form-item label="靶场详情" prop="introduce">
              <el-input v-model="formData.introduce" type="textarea" placeholder="请输入靶场详情"
                        :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="图片" prop="testPictureUrl" required>
              <el-upload ref="testPictureUrl" :file-list="testPictureUrlfileList" :action="testPictureUrlAction"
                         :before-upload="testPictureUrlBeforeUpload"
                         :http-request="imgUpload"
                         :on-success="successImgs">
                <el-button size="small" type="primary" icon="el-icon-upload">靶场照片</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="解析图片" prop="courseUrl" required>
              <el-upload ref="courseUrl" :file-list="courseUrlfileList" :action="courseUrlAction"
                         :before-upload="courseUrlBeforeUpload"
                         :http-request="courseUpload"
                         :on-success="successCourse">
                <el-button size="small" type="primary" icon="el-icon-upload">靶场解析图片</el-button>
              </el-upload>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="实验类型">
              <el-cascader :options="testTypeOptions" v-model="formData.testType" :show-all-levels="false"
                           placeholder="请选择实验类型"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="难度等级" prop="difficulty">
              <el-select v-model="formData.difficulty" placeholder="请选择难度等级" clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item, index) in difficultyOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  components: {},
  props: {
    updateDetail: Boolean,
    testDetail: Object,
    testId: 0,
  },
  data() {
    return {
      updateShow: this.updateDetail,
      updateTestDetail: this.testDetail,
      testCode: 0,
      formData: {
        testName: undefined,
        simpleNote: undefined,
        introduce: undefined,
        testPictureUrl: null,
        testUrl: null,
        courseUrl: null,
        testType: [],
        difficulty: 5,
      },
      rules: {
        testName: [{
          required: true,
          message: '请输入靶场名称',
          trigger: 'blur'
        }],
        simpleNote: [{
          required: true,
          message: '请输入靶场简介',
          trigger: 'blur'
        }],
        introduce: [{
          required: true,
          message: '请输入靶场详情',
          trigger: 'blur'
        }],
        testType: [{
          required: true,
          type: 'array',
          message: '请至少选择一个实验类型',
          trigger: 'change'
        }],
        difficulty: [{
          required: true,
          message: '请选择难度等级',
          trigger: 'change'
        }],
      },
      testPictureUrlAction: 'http://localhost:9191/testDetail/upload',
      testPictureUrlfileList: [],
      courseUrlAction: 'http://localhost:9191/testDetail/upload',
      courseUrlfileList: [],
      testTypeOptions: [{
        "label": "安全实验",
        "value": 0,
        "id": 102,
        "children": [{
          "label": "文件类",
          "value": 1,
          "id": 105
        }, {
          "label": "xss",
          "value": 2,
          "id": 106
        }, {
          "label": "sql注入",
          "value": 3,
          "id": 107
        }, {
          "label": "xee",
          "value": 4,
          "id": 108
        }, {
          "label": "getshell",
          "value": 11,
          "id": 109
        }, {
          "label": "二进制分析",
          "value": 12,
          "id": 110
        }]
      }, {
        "label": "CTF实验",
        "value": 1,
        "id": 111,
        "children": [{
          "label": "SSRF",
          "value": 5,
          "id": 112
        }, {
          "label": "CSRF",
          "value": 6,
          "id": 113
        }, {
          "label": "SSTI",
          "value": 7,
          "id": 114
        }, {
          "label": "代码执行",
          "value": 8,
          "id": 115
        }, {
          "label": "PHP反序列化",
          "value": 9,
          "id": 116
        }, {
          "label": "逻辑漏洞",
          "value": 10,
          "id": 117
        }]
      }],
      difficultyOptions: [{
        "label": "初级",
        "value": 5
      }, {
        "label": "中级",
        "value": 10
      }, {
        "label": "高级",
        "value": 15
      }],
      testTypeProps: {
        "multiple": false,
        "label": "label",
        "value": "安全实验",
        "children": "children"
      },
    }
  },
  computed: {},
  watch: {
    updateDetail(newVal) {
      this.updateShow = newVal;
    },
    testId(newVal) {
      this.testCode = newVal
      this.initGetOne()
    },

  },
  created() {

  },
  mounted() {
  },
  methods: {
    imgUpload(file){
      this.$axios.postForm("/testDetail/upload",{file:file.file})
          .then(response =>{
            let responseData = response.data
            this.formData.testPictureUrl=responseData
          })
    },

    courseUpload(file){
      this.$axios.postForm("/testDetail/upload",{file:file.file})
          .then(response =>{
            let responseData = response.data
            this.formData.courseUrl=responseData
          })
    },

    initGetOne() {
      let params = {
        testCode: this.testCode
      }
      this.$axios.postForm("/testDetail/getOne", params)
          .then(response => {
            let responseData = response.data
            this.formData.testName = responseData.data.testName
            this.formData.simpleNote = responseData.data.simpleNote
            this.formData.introduce = responseData.data.introduce
            this.formData.testPictureUrl = responseData.data.testPictureUrl
            this.formData.courseUrl = responseData.data.courseUrl
            this.formData.testType = responseData.data.testTypeArray
            this.formData.difficulty = responseData.data.difficult
          })

    },
    onOpen() {
    },
    onClose() {
      this.$refs['elForm'].resetFields()
      this.close();
    },
    close() {
      this.$emit('update:visible', false);
      this.$emit('initList');
    },
    handelConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return

        let params = {
          testCode: this.testCode,
          testName: this.formData.testName,
          simpleNote: this.formData.simpleNote,
          introduce: this.formData.introduce,
          testPictureUrl: this.formData.testPictureUrl,
          courseUrl: this.formData.courseUrl,
          testTypeId: this.formData.testType[1],
          difficult: this.formData.difficulty,
        }
        this.$axios.postForm("/testDetail/updateTestDetail", params)
            .then(response => {
              let responseData = response.data
              if (responseData.code == 200) {
                this.$message({
                  type: 'success',
                  message: '修改成功!',
                  duration: 2000
                });
                this.close();
              } else {
                this.$message({
                  type: 'error',
                  message: responseData.msg,
                  duration: 2000
                });
              }
            })

      })
    },
    testPictureUrlBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      return isRightSize
    },
    courseUrlBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      return isRightSize
    },
    successImgs(res) {
      this.formData.testPictureUrl = res;
    },

    successCourse(res) {
      this.formData.courseUrl = res;
    },
  }
}

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}

</style>
